<template>
  <div class="wrap">
    <div class="col-title">
      告警通知情况
    </div>

    <div class="alarm-box">
      <div v-if="infoList && infoList.length > 0">
        <p
          v-for="d in infoList"
          :key="d.id"
        >
          <span>【{{ d.alertTime }}】 {{ d.content }}</span>
        </p>
      </div>
      <p v-else>暂无数据</p>
    </div>
  </div>
</template>

<script>
  import { gPostAction } from "@/api/manage";

  export default {
    name: "Alarm",
    data() {
      return {
        infoList: [],
      };
    },
    mounted() {
      this.loadAlarmInfo();
    },
    methods: {
      loadAlarmInfo() {
        const postData = {
          resourceTypes: "",
          pageNo: 1,
          pageSize: 3,
        };

        gPostAction("/history/page", postData).then((res) => {
          if (res.success) {
            this.infoList = res.data.list;
          }
        });
      },
    },
  };
</script>

<style
  lang="less"
  scoped
>
  .wrap {
    padding: 25px 40px 0 25px;

    .col-title {
      display: flex;
      align-items: center;
      font-size: 16px;
      color: #017972;
      padding-left: 10px;
      margin-bottom: 20px;

      &::before {
        content: '';
        height: 16px;
        display: inline-block;
        border-left: 2px solid #017972;
        padding-right: 10px;
      }
    }

    .alarm-box {
      padding-left: 12px;
      min-height: 91px;

      p {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
</style>